<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap-table.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">

    <style>
        li {
            list-style: none;
            float: left;
            padding: auto;
        }
    </style>
</head>
<body>
<div>
    <div class="col-sm-12 ">
        <ul>
            <li>
                <label>生日：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="yyyy" id="birthday" value="">
                </div>
            </li>
            <li>
                <label></label><input class="btn btn-default" dataformatas="yyyy" type="button" onclick="init()"
                                      value="搜索"></label>
                <label><input class="btn btn-default" dataformatas="yyyy" type="button" onclick="reset()"
                              value="重置"></label>
            </li>
        </ul>
    </div>

    <div class="">
        <input type='button' class='btn-primary' onclick='insert()' value='新增'>
        <input type="button" class="btn-xs" onclick="exportExcel()" value="导出">
        <input type="button" class="btn-xs" onclick="importExcel()" value="导入">
        <table class="table table-striped">
            <thead>
            <tr>
                <td>姓名</td>
                <td>电话</td>
                <td>地址</td>
                <td>生日</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
        <ul class="pagination" id="pagination" style="float: right">
            <!--        bootstrap分页样式
                        <li><a href='#'>&laquo;</a></li>
                        <li class='active'><a href='#'>1</a></li>
                        <li class='disabled'><a href='#'>&raquo;</a></li>
            -->
        </ul>
<!--
        <ul style="float:left;">
            <li>
                显示
                <select id="pageSize">
                    <option value="5" selected>5</option>
                    <option value="10">10</option>
                    <option value="15">15</option>
                    <option value="20">20</option>
                </select>
                条数据
            </li>
        </ul>
-->

    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/js/libs/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/libs/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/libs/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/common/crud.js}"></script>
<script>
    var prefix = "/user"
    var pageNum = 1
    var pageSize = 5
    var total = [[${total}]]

    layui.use(function () {
        var laypage = layui.laypage,
            laydate = layui.laydate,
            layer = layui.layer;


        //年选择器
        laydate.render({
            elem: '#birthday'
            , type: 'year'
        });

        $.get("/user/pagination",function (data) {
            laypage.render({
                elem: 'pagination',
                count: data.data, //数据总数，从服务端得到
                limit: 5,
                limits: [5,10,15,20],
                jump: function (obj, first) {
                    pageNum = obj.curr,//当前页
                    pageSize = obj.limit;//显示条数
                    init()
                }
            });
        })

    });

    $(function () {
        init()
    })

    //获取数据总数
    pagination= function() {
        $.get("/user/pagination",function (data) {
            return data.data;
        })
    }
    //初始化列表
    function init() {
/*
        layui.use('laypage',function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'pagination',
                count: total, //数据总数，从服务端得到
                limit: pageSize,
                limits: [5,10,15,20]
            });
        })
*/
        var data = {
            object: {
                birthday: $("#birthday").val() == "" ? "" : $("#birthday").val() + "-01-01",
            },
            pageNum: pageNum,
            pageSize: pageSize
        }
        $("#tbody").html("")
        $.ajax({
            url: "/user/list",
            type: "post",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(data),
            success: function (result) {
                var html = ''
                $.each(result.data, function (index, user) {
                    html += "<tr><td>" + user.name + "</td>" +
                        "<td>" + user.phone + "</td>" +
                        "<td>" + user.address + "</td>" +
                        "<td>" + user.birthday + "</td>" +
                        "<td><input type='button' class='btn-success' onclick='update("+user.id+")'value='修改'></td>" +
                        "<td><input type='button' class='btn-info' onclick='remove(" + user.id + ")'value='删除'></td></tr>"
                })
                $("#tbody").html(html)
            },
            error: function () {
                alert("查询失败，请刷新重试")
            }
        })
    }

    //重置
    function reset() {
        $("#birthday").val("")
        init()
    }

    //切换数据量
    $("#pageSize").change(function () {
        pageSize = $("#pageSize").find("option:checked").val()
        init()
    })

</script>
</html>
